<template>
    <div>
        <h1>房态列表展示</h1>
        房态编号：
        <input type="text" v-model="find.rid">
        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead >
                <tr>
                    <td>房态编号</td>
                    <td>房态名称</td>
                    <td>开始时间</td>
                    <td>房态价格</td>
                    <td>房态数量</td>
                    <td>状态</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>{{a.rid  }}</td>
                    <td>{{a.name  }}</td>
                    <td>{{moment(a.createTime).format("YYYYMMDD")  }}</td>
                    <td>{{a.price  }}</td>
                    <td>{{a.num  }}</td>
                    <td>{{a.stata?"开房":"关房"  }}</td>
                </tr>
            </tbody>
        </table>
        <span>
            共{{serty.tatalpage  }}页，当前第{{find.index  }}页，共{{serty.count  }}行，当前{{find.size  }}行
        </span>
        <input type="button" value="首页" @click="Fanye(1)">
        <input type="button" value="上一页" @click="Fanye((find.index)-1)">
        <input type="button" value="1" @click="Fanye(1)">
        <input type="button" value="2" @click="Fanye((find.index)+1)">
        <input type="button" value="3" @click="Fanye((find.index)+1)">
        <input type="button" value="下一页" @click="Fanye((find.index)+1)">
        <input type="button" value="尾页" @click="Fanye(serty.tatalpage)">
        <span>
            <input type="number" >
            <input type="button"  @click="Fanye(1)">
            <input type="button" value="跳转" @click="Fanye(2)">
        </span>
    </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
import { useRoute } from "vue-router";
import moment from "moment";
const data=ref([{
    "id": 0,
  "rid": 0,
  "name": "",
  "createTime": "2025-04-14T01:57:54.896Z",
  "price": 0,
  "num": 0,
  "stata": true
}])
const Fanye=(val:number)=>{
    if(val>0 && val<=serty.value.tatalpage){
        find.value.index=val
        Show()
    }
}
const find=ref({
    rid:0,
    index:1,
    size:2
})
const serty=ref({
    count:0,
    tatalpage:0
})
onMounted(()=>{
  Show();
})
const Show=()=>{
    axios.get("https://localhost:7263/api/Room/GetRoom",{params:find.value}).then(res=>{
        data.value=res.data.data
        serty.value.count=res.data.count
        serty.value.tatalpage=Math.ceil(res.data.count/find.value.size);
    })
}
</script>
<style scoped></style>